<template>
	<view>
		<view v-for="item in goodsList">
			<view class="" @tap="toDetail(item.id)">
				<view class="item">
					<view class="detail">
						<view class="detail_son">名称：{{item.name}}</view>
						<view class="detail_son">年化收益率：{{item.rate}}%</view>
					</view>
					<image src="../../static/thing.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<view class="foot">
			<view class="foot_son">
				<view class="page_row"  @click="lastPage"> <text v-if="curPage>1">上一页</text></view>
				<view class="page_row"  @click="nextPage" >下一页</view>
			</view>
			<view class="foot_son">
				当前页数
				<view style="margin-left: 48rpx;">
					<input type="text"  v-model="page">
				</view>
				
			</view>
			<view class="foot_son"> 显示数目
				<view style="margin-left: 40rpx;">
					<input type="text"  v-model="pageSize">
				</view>
			
			</view>
		</view>
		
		<view class="btn">
			<button  type="default" @tap="getgoods">跳转</button>
		</view>
	</view>
</template>

<script>
	import urls from '@/common/urls.js'
	export default {
		data() {
			return {
				curPage:1,
				page: 1,
				pageSize: 10,
				goodsList: [],
				isLast:false,
			}
		},
		methods: {
			getgoods(){
				const that = this;
				this.$axios.post(urls.graphql, {
						query: `
							query goodsList {
								goodsList(page: ${this.page},pageSize: ${this.pageSize}) {
									id
									name
									cate
									rate
								}
							}`
					}, )
					.then(res => {
						const goodsList = res.data.goodsList;
						if (goodsList.length === 0) {
							that.isLast = true
							uni.showToast({
								title: '已经到底了哦',
								icon: 'none'
							})
							this.page--
						}else{
							that.isLast = false
							console.log("goodsList ok", goodsList);
							that.goodsList = goodsList;
							that.curPage = that.page
						}	
						
					})
					.catch(err => {
						console.log("err", err)
						uni.showToast({
							title: '未知错误',
							icon: 'none'
						})
					})
			},
		nextPage(){
			this.page++;
			this.getgoods()
		},
		lastPage(){
			if(this.page>1){
				this.page--;
				this.getgoods();
			}
		},
		toDetail(id){
			console.log(id)
			uni.navigateTo({
				url: './detail?id='+id
			});
		}
		},
		onLoad() {
			this.getgoods()
		}

	}
</script>

<style lang="scss">
	page{background:#f0f0f0;}
.item{
	background: #FFFFFF;
	margin-bottom: 5rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	.detail{
		padding-top: 20rpx;
	}
	.detail_son{
		margin-bottom: 10rpx;
		font-size: 32rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		
	}
	image{
		width: 150rpx;
		height: 150rpx;
	}
	
}
.foot{
	display: flex;
	justify-content: space-between;
	.foot_son{
		width: 200rpx;
		color: #168cf1;
		
	}
}
.btn{
	button{
		background: #4768f3;
		width: 610rpx; 
		color: white;
		
		margin-left: 40rpx;
		margin-bottom: 20rpx;
	}
}
.page_row{
	height: 40rpx; 
}
</style>
